<template>
	<view class="goodlist" v-if="dataBuffer">
		<!-- head区域 -->
		<view class="head">
			<view class="search">
				<u-search 
					:disabled="true"
					@click="goSearch"
					shape="square"
					:show-action="true" 
					action-text="搜索" 
					:animation="true" 
					margin="10rpx 0rpx">
				</u-search>
			</view>
			<view class="sortbox">
				<view  class="sort">
					<view hover-class="touchOpacity">综合排序</view>
					<view hover-class="touchOpacity">销量</view>
					<view hover-class="touchOpacity" @click="pricesort">
						<text>价格</text>
						<image src="../../static/icon/sort.png"></image>
					</view>
					<view hover-class="touchOpacity">好评度</view>
					<view hover-class="touchOpacity">店铺</view>
				</view>	
				<view class="filter" hover-class="touchOpacity">
					<image src="../../static/icon/filter.png"></image>
					<text>筛选</text>
				</view>
			</view>
			
		</view>

		<!-- 提示标语区域 -->
		<view class="biaoyu" hover-class="touchOpacity">
			<u-notice-bar mode="vertical" :list="list"  :show="true" :close-icon="true"></u-notice-bar>
		</view>
		
		<!-- 商品列表区域 -->
		<view class="list" >
			<view 
				class="row" 
				v-for="(item,index) in goodlist" :key="index" 
			>
				<!-- 执行图片赖加载 此处注意百度小程序问题需要指定固定高度-->
				<view class="image">
					<!-- <u-lazy-load :key="index" :image="URL + item.img" height="218"></u-lazy-load> -->
					<image :src="URL + item.img" :lazy-load="true" style="width: 100%;height: 100px;"></image>
				</view>
				<view class="info" hover-class="touchOpacity">
					<text @click="toGooddescPage(item.id)">{{item.goodsname}}</text>	
					<view class="money">
						<text>￥ {{ item.price }}</text> <text>￥{{ item.market_price }}</text>
					</view>
					<text>双11.11限制200起</text>
					<text space="ensp">3565评论   99%好评</text>	
				</view>
			</view>
		</view>
		
		<!-- 底部悬浮球 -->
		<view 
			v-if="topBuffer"
			class="quick_top" 
			hover-class="touchOpacity"
			@click="goTop"
		>
			<image src="../../static/icon/totop.png"></image>
		</view>
	</view>
	<view v-else>
		<!-- 无数据提示 -->
		<u-empty 
			text="暂无数据~~去逛逛~~" mode="list" 
			:show="!dataBuffer" 
			color="orange" icon-color="orange"
		></u-empty>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				URL:this.$URL,
				list: [],
				topBuffer:false,//控制悬浮球显示
				dataBuffer:true,
				goodlist:[], //商品数据集合
				page:1, //页码
				size:5, // 偏移量
			}
		},
		onLoad(option){
			// 获取notice 通知信息
			// 使用的socket进行获取
			this.$socket.on("notice",(res)=>{
				// console.log(res,"服务端返回的数据")
				this.list = [];
				this.list.push(res)
			})
			this.getGoodsLists();
		},
		// 向下滚动，显示悬浮球
		onPageScroll(e){
			// console.log(e)
			if(e.scrollTop >=200){
				// 显示悬浮球
				this.topBuffer = true
			}else{
				this.topBuffer = false;
			}
		},
		// 上拉触底效果
		onReachBottom() {
			// 50 距离
			this.page++;  //  1 -- 2 --  3   例如，总页就是3页
			if(this.page > this.totalPage){
				// uni.showToast({
				// 	title:"已经没有更多数据了",
				// 	icon:"none"
				// })
				this.$tips.showtoast("已经没有更多数据了")
				return;
			}
			this.getGoodsLists()
			
		},
		methods: {
			// 点击立即抢购，进入商品详情页面
			toGooddescPage(id){
				uni.navigateTo({
					url:"../gooddesc/gooddesc?id="+id
				})
			},
			// 2.点击悬浮球，返回顶部
			goTop(){
				uni.pageScrollTo({
					scrollTop:0, //距离顶部0位置
					duration:100
				})
			},
			// 1.获取商品数据
			async  getGoodsLists(){
				this.$tips.showload("数据加载中")
				// cateid  type page  size
				let  { cateid,type } = this.$mp.query;// 获取传递过来的参数
				let  {page,  size}  = this;
				
				// console.log(cateid,type,page,size)
				// return;
				var option = {
					url:"getgoodlist",
					data:{
						cateid,type,page,size
					}
				}
				
				let res =  await this.$http(option);
				if(res.data.code == 200){
					this.$tips.hideload();
					// console.log(res)
					if(res.data.list.goodData == null){
						// 没有值
						this.dataBuffer = false
					}else{
						// 有值
						this.dataBuffer = true;
						this.totalPage =  res.data.list.totalPage;// 总页数
						// 进行新老数据的拼接
						this.goodlist = this.goodlist.concat(res.data.list.goodData);
					}
				}else{
					this.$tips.hideload();
					this.$tips.showtoast("网络故障~~~")
				}
				
			}
		}
		
		
	}
</script>

<style>
	/* 引入样式 */
	@import url("@/static/css/goodlist.css");
</style>
